﻿/// <reference path="../../jquery-1.10.2.js" />
/// <reference path="../ControlType.js" />

var Input = function (config) {
    this.config = {
        id: 'input_' + Input.index++,
        moveEnable: false, //是否可以移动
        value: '',
        ctype: ControlType.input, //控件类型
        moveRangeParent: 'document',
        //控件的事件对象
        //跟dom对象的事件一致的，去掉on，雷同jq的bind模式
        events: {
            keyup: $.noop,
            keydown: $.noop,
            change: $.noop
        }, 
        css: {
            'width': '120px'
        }
    };
    $.extend(true, this.config, config);
    //标志自己的jq对象
    this.meObj = null;
    this.init();
};

Input.index = 1;//控件的index，用于自动生成控件的ID号
Input.htmlTemplate = "<input type='text' ctype='{ctype}' moveEnable='{moveEnable}' value='{value}' moveRangeParent='{moveRangeParent}'/>";
Input.prototype.init = function () {
    /// <summary>控件的初始化操作</summary>
    var html = Input.htmlTemplate;
    //控制第一个输入框的样式即可
    for (var item in this.config) {
        html = MyString.replaceAll(html, '{' + item + '}', this.config[item].toString());
    }
    this.meObj = $(html);
    //绑定事件
    for (var e in this.config.events) {
        this.meObj.bind(e, this.config.events[e]);
    }
    this.meObj.css(this.config.css);
};

Input.prototype.appendTo = function (el, x, y) {
    /// <summary>把控件显示在哪个位置上</summary>
    /// <param name="el" type="DomElement/String[id]">父对象</param>
    /// <param name="x" type="int">x坐标</param>
    /// <param name="y" type="int">y坐标</param>
    /// <summary>把控件显示在哪个位置上</summary>
    /// <param name="el" type="DomElement/String[id]">父对象</param>
    /// <param name="x" type="int">x坐标</param>
    /// <param name="y" type="int">y坐标</param>
    el = $.getJQObj(el);
    if (el === null) return;
    //做一个父的DIV，方便控制移动(并且必须要设置这个div的宽度，否则后面移动计算位置的时候无法获取宽度）
    //有指定x、y坐标的话，采用绝对定位
    if (typeof (x) !== "undefined" && typeof (y) !== "undefined") {
        $(this.meObj).css({
            'left': x,
            'top': y,
            'position': 'absolute'
        }).appendTo(el);
    }
    else {
        $(this.meObj).appendTo(el);
    }
    //如果可移动，则创建移动事件
    if (this.meObj[0].moveEnable == 'true') {
        JQMove.setMoveEl(this.meObj);
    }
    return this.meObj;
};